<template>
	<view class="callee-selector">
		<view class="callee-selector-header">
			<view class="close" @click="goBack()">取消</view>
			<text>选择成员</text>
			<view class="confirm" @click="groupCall">确定</view>
		</view>
		<view class="callee-avatar">
			<view class="avatar-list">
				<image class="avatar-item" :src="currentUser.avatar"></image>
				<image class="avatar-item" v-for="(callee, index) in callees" :key="index" :src="callee.avatar"></image>
			</view>
		</view>
		<checkbox-group @change="selectCallees" class="member-list">
			<view v-for="(member, index) in groupMembers" :key="index" class="member-item">
				<image class="member-avatar" :src="member.avatar"></image>
				<view class="member-name">{{member.name}}</view>
				<checkbox class="member-check" :value="member.id" :checked="callees.includes(member)" />
			</view>
		</checkbox-group>
	</view>
</template>

<script>
	import restApi from '../../../lib/restapi';
	const GRTC = uni.$GRTC;
	export default {
		data() {
			return {
				groupId: null,
				currentUser: null,
				groupMembers: null,
				callees: []
			}
		},
		onLoad(options) {
			this.mediaType = Number(options.mediaType);
			this.groupId = options.groupId;
			this.currentUser = uni.$currentUser;
			this.groupMembers = restApi.findGroupMembers(this.groupId);
			this.groupMembers = this.groupMembers.filter(user => user.id !== this.currentUser.id)
		},
		methods: {
			selectCallees(e) {
				const selectedCalleeIds = e.detail.value;
				this.callees = this.groupMembers.filter(member => selectedCalleeIds.includes(member.id));
			},
			goBack() {
				uni.navigateBack();
			},
			groupCall() {
				const calleeIds = this.callees.map((user) => user.id);
				if (calleeIds.length < 1) {
					uni.showToast({
						icon: "error",
						title: "请先选择成员！",
						duration: 2000
					})
					return;
				}
				const notificationBody = this.mediaType === 0 ? '邀请你加入多人视频' : '邀请你加入多人通话';
				GRTC.groupCall({
					groupId: this.groupId,
					calleeIds: calleeIds,
					mediaType: this.mediaType,
					notification: {
						title: this.currentUser.name,
						body: notificationBody,
						sound: 'ring',
						badge: '+1'
					},
				}).then(() => {
					uni.redirectTo({
						url: `./dial`,
					})
				}).catch((error) => {
					console.log("error:", error)
					uni.showToast({
						icon: "error",
						title: "呼叫失败:" + error,
						duration: 2000
					})
				})
			}
		}
	}
</script>

<style>
	.callee-selector {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #29282B;
	}

	.callee-selector-header {
		padding: 100rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #ffffff;
	}

	.callee-selector-header .confirm {
		width: 110rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background: #D02129;
		text-align: center;
		line-height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.callee-avatar {
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

	.avatar-list {
		display: flex;
		overflow: scroll;
		flex-wrap: nowrap;
	}

	.avatar-item {
		flex-basis: 120rpx;
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #4D4D4D;
		margin: 0 10rpx;
	}

	.member-list {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.member-item {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #393538;
		padding: 20rpx 40rpx;
	}

	.member-check {
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		border-color: #d1d1d1 !important;
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 50% !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #D02129;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		color: #D02129;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #4D4D4D;
	}

	.member-name {
		flex: 1;
		margin-left: 20rpx;
		color: #D0D2D4;
		font-size: 30rpx
	}
</style>